<template>
  <section class="points">
    <div class="col-item">
      <span style="font-size:16px">坐标系：</span>
      <a-select v-model="select.value">
        <a-select-option v-for="item in select.options" :key="item.value">{{item.title}}</a-select-option>
      </a-select>
    </div>

    <a-textarea
      class="col-item"
      :autosize="{minRows:4,maxRows:8}"
      v-model="coordData"
      placeholder='数据结构{"lng": stirng | number, "lat": string | number}[ ]'
    ></a-textarea>
    <a-button type="primary" style="float:right" @click="submit">添加</a-button>
  </section>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

type select = {
    value: string;
    options: {
        title: string;
        value: string;
    }[];
};

@Component
export default class points extends Vue {
    info: { show: boolean; data: string } = {
        show: true,
        data: ''
    };
    markerLayer: IObject = {};
    infoWindow: IObject = {};
    coordData: string = '';
    select: select = {
        value: 'GCJ-02',
        options: [
            {
                title: 'GCJ-02(高德坐标)',
                value: 'GCJ-02'
            },
            {
                title: 'BD-09(百度坐标)',
                value: 'BD-09'
            },
            {
                title: 'WGS84(GPS坐标)',
                value: 'WGS84'
            }
        ]
    };

    submit() {
        let data;
        try {
            data = JSON.parse(this.coordData);
        } catch (error) {
            this.$message.error('输入数据不符合格式');
        }
        if(data){
          this.$emit('drawPoint',data)
        }
    }

    cancel() {
        this.info.show = false;
    }

    error() {
        this.$message.error('输入的数据不符合格式');
    }

    // loadData() {
    //     this.info.show = false;
    //     let data;
    //     try {
    //         data = JSON.parse(this.info.data);
    //     } catch (error) {
    //         this.error();
    //     }
    //     console.log('inputData', data);
    //     let markers: AMap.Marker[] = [];
    //     if (this.markerLayer) {
    //         this.map.remove(this.markerLayer);
    //     }
    //     if (data) {
    //         data.forEach((vo: IObject) => {
    //             let point = new AMap.LngLat(vo.SLON, vo.SLAT);
    //             let marker = new AMap.Marker({
    //                 position: point,
    //                 extData: vo
    //             });
    //             markers.push(marker);
    //         });
    //     }
    //     this.markerLayer = new AMap.OverlayGroup(markers);
    //     this.map.add(this.markerLayer);

    //     this.markerLayer.on('click', (event: IObject) => {
    //         let data = event.target.getExtData();
    //         let html = [];
    //         for (let key in data) {
    //             html.push(`<b>${key}</b>：${data[key]}`);
    //         }
    //         this.infoWindow.setContent(`
    //         <div style="width:400px;padding:20px 10px;font-size:14px;line-height:24px;">
    //             ${html.join('<br>')}
    //         </div>
    //         `);
    //         this.infoWindow.open(this.map, event.target.getPosition());
    //     });
    // }

    // reInput() {
    //     this.info.show = true;
    //     this.info.data = '';
    // }
}
</script>
<style lang="scss" scoped>
// .points {
//     background-color: #ffff;
//     width: 420px;
//     padding: 10px 15px;
//     border: 1px solid #d6d6d6;
//     border-radius: 5px;
// }
.col-item:not(:last-child) {
    margin-bottom: 10px;
}
</style>